<script setup lang="ts">
import * as echarts from 'echarts';
import { onMounted } from "vue";
import { Electricity } from '../../api/Operation/index'


onMounted(async () => {
    var myChart = echarts.init(document.getElementById('LeftMain'));

    var option = {
        tooltip: {
        },
        grid: {
            top: '8%',
            left: '1%',
            right: '1%',
            bottom: '8%',
            containLabel: true,
        },
        xAxis: [{
            type: 'category',
            boundaryGap: false,
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#233e64'
                },
            },
            axisLabel: { //坐标轴刻度标签的相关设置
                textStyle: {
                    color: '#6a9cd5',
                    margin: 15,
                },
            },
            axisTick: { show: false, },
            data: [],
        }],
        yAxis: [{
            type: 'value',
            min: 0,
            max: 1000,
            splitNumber: 7,
            splitLine: {
                show: true,
                lineStyle: {
                    color: '#233e64'
                }
            },
            axisLine: { show: false, },
            axisLabel: {
                margin: 20,
                textStyle: {
                    color: '#6a9cd5',

                },
            },
            axisTick: { show: false, },
        }],
        series: [{
            name: '异常流量',
            type: 'line',
            smooth: true, //是否平滑曲线显示
            // 			symbol:'circle',  // 默认是空心圆（中间是白色的），改成实心圆
            symbolSize: 0,

            lineStyle: {
                normal: {
                    color: "#3deaff"   // 线条颜色
                }
            },
            areaStyle: { //区域填充样式
                normal: {
                    //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: 'rgba(61,234,255, 0.9)' },
                        { offset: 0.7, color: 'rgba(61,234,255, 0)' }
                    ], false),

                    shadowColor: 'rgba(53,142,215, 0.9)', //阴影颜色
                    shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
                }
            },
            data: []
        }]
    };


    let res = await Electricity()
    console.log(res)

    let seriesData: any = option.series[0].data
    let XAxisData: any = option.xAxis[0].data

    for (let i = 0; i < res.data.data.length; i++) {
        seriesData.push(res.data.data[i].value)
        XAxisData.push(res.data.data[i].category)
    }

    myChart.setOption(option);
})
</script>

<template>
    <div class="left-Main">
        <div class="left-Main-img">
            <span style="padding: 10px; color: aliceblue; font-size: 1.5rem; line-height: 3rem;">实时用电</span>
        </div>
        <div class="left-Main-bottom">
            <div class="left-Main-bottom-header">
                <dv-border-box-12 class="left-Main-bottom-header-left">
                    <div class="left-Main-bottom-header-left-l"></div>
                    <div class="left-Main-bottom-header-left-r">
                        <p style="font-size: 20px;">72670</p>
                        <p>总用电量(KW)</p>
                    </div>
                </dv-border-box-12>
                <dv-border-box-12 class="left-Main-bottom-header-right">
                    <div class="left-Main-bottom-header-right-l"></div>
                    <div class="left-Main-bottom-header-right-r">
                        <p>72670</p>
                        <p>总用电量(KW)</p>
                    </div>
                </dv-border-box-12>
            </div>
            <div class="left-Main-bottom-foot">
                <div id="LeftMain" style="width: 100%; height: 100%;"></div>
            </div>
        </div>
    </div>
</template>

<style scoped lang="scss">
.left-Main {
    width: 28rem;
    height: 20rem;
    margin: 2rem 6rem;
    background-color: rgb(16, 29, 91);

    &-img {
        width: 100%;
        height: 3rem;
        background: url('../../assets/images/leftImg.png') no-repeat center center;
        background-size: 100% 100%;
    }

    &-bottom {
        width: 100%;
        height: 15rem;
        margin-top: 2rem;
        background-color: rgb(29, 46, 107);

        &-header {
            width: 100%;
            height: 5rem;
            display: flex;
            margin-bottom: 20px;

            &-left {
                width: 40%;
                height: 90%;
                margin-left: 9%;
                margin-top: 5%;
                color: white;
                line-height: 2rem;
                text-align: center;

                &-l {
                    width: 20%;
                    height: 100%;
                    background: url('../../assets/icon/智能检测/dian.png') no-repeat center center;
                    background-size: 100%;
                    margin-left: 10px;
                    float: left;
                }

                &-r {
                    width: 90%;
                    height: 100%;
                }
            }

            &-right {
                width: 40%;
                height: 90%;
                margin-left: 4%;
                margin-top: 5%;
                color: white;
                line-height: 2rem;
                text-align: center;

                &-l {
                    width: 20%;
                    height: 100%;
                    background: url('../../assets/icon/智能检测/dian.png') no-repeat center center;
                    background-size: 100%;
                    margin-left: 10px;
                    float: left;
                }

                &-r {
                    width: 90%;
                    height: 100%;
                }
            }

        }

        &-foot {
            width: 100%;
            height: 9rem;
        }
    }
}
</style>